<template>
  <div>
    <CategorySelector style="margin-bottom:10px" :disabledSelector="isShowAttrList"></CategorySelector>
    <el-card>
      <div v-if="isShowAttrList">
        <el-button type="primary" :disabled="!categoryStore.category3Id" :icon="Plus" @click="toAddAttr">添加属性</el-button>
        <el-table border v-loading="loading" :data="attrList" style="margin-top:10px">
          <el-table-column type="index" align="center" label="序号" width="80px" />
          <el-table-column label="属性名称" prop="attrName" width="200px" />
          <el-table-column label="属性值列表">
            <template v-slot="{row}">
              <el-tag class="ml-2" style="margin-right:6px" type="success" v-for="attrValue in row.attrValueList" :key="attrValue.id">{{attrValue.valueName}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200px">
            <template v-slot="{row}">
              <el-button size="small" type="warning" :icon="Edit" @click="toEditAttrInfo(row)"></el-button>
              <el-popconfirm title="确定要删除此条属性吗?" @confirm="deleteAttrInfo(row.id)">
                <template #reference>
                  <el-button :icon="Delete" type="danger" size="small"></el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-else>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="属性名">
            <el-input v-model="attrInfo.attrName" placeholder="请输入属性名" />
          </el-form-item>
        </el-form>
        <el-button type="primary" @click="addAttrValue" :disabled="!attrInfo.attrName">添加属性值</el-button>
        <el-table :data="attrInfo.attrValueList" style="margin:10px">
          <el-table-column label="序号" type="index" align="center" width="80px" />
          <el-table-column label="属性值名称">
            <template v-slot="{row,$index}">
              <el-input ref="inputRef" v-if="row.isShowInput" size="small" v-model="row.valueName" placeholder="请输入属性值" @blur="deleteCurrentRow(row,$index)"></el-input>
              <span v-else @dblclick="toEditCurrentRow(row,$index)" style="display:inline-block;width:80%">{{row.valueName}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template v-slot="{row,$index}">
              <el-popconfirm title="确定要删除此条属性吗?" @confirm="deleteAttrValue($index)">
                <template #reference>
                  <el-button :icon="Delete" type="danger" size="small"></el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-button type="primary" :disabled="!attrInfo.attrValueList.length" @click="toAddOrUpdateAttr">保存</el-button>
        <el-button type="default" @click="isShowAttrList=true">取消</el-button>
      </div>
    </el-card>
  </div>
</template>

<script lang="ts">
// import CategorySelector from '../../../components/CategorySelelctor/index.vue';
import CategorySelector from '@/components/CategorySelelctor/index.vue';
export default {
  name: 'Attr',
  components: {
    CategorySelector
  }
};
</script>
<script lang="ts" setup>
import { ref, watch, reactive, nextTick } from 'vue';
import { Plus, Edit, Delete } from '@element-plus/icons-vue';
import { reqAddOrUpdateAttrInfo, reqDeleteAttrInfo, reqGetAttrListData } from '@/api/product/attr';
import { useCategorySelectorInfoStore } from '@/stores/categorySelector';
import { ElMessage } from 'element-plus';
import type { attrInfoModel, attrListModel, attrValueModel } from '@/api/product/model/attrModel';

const attrList = ref<attrListModel>([]);
const isShowAttrList = ref(true);
const loading = ref(false);
const categoryStore = useCategorySelectorInfoStore();

const inputRef = ref();
// 定义一个存储添加属性时的对象
const attrInfo = reactive<attrInfoModel>({
  attrName: '', // 待添加的属性名
  attrValueList: [], // 属性名对应的那些具体的属性值
  categoryId: -1, // 三级分类的具体的id
  categoryLevel: 3 // 几级分类 当前添加的只有一个三级分类 所以写3即可
});

// 1.根据三级ID 获取属性列表 函数在三级导航变化更新删除时都会用到
const getAttrListData = async () => {
  loading.value = true;
  attrList.value = await reqGetAttrListData({
    category1Id: categoryStore.category1Id,
    category2Id: categoryStore.category2Id,
    category3Id: categoryStore.category3Id
  });

  // 请求成功之后要变成false
  loading.value = false;
};

// 2.监听三级导航ID变化 若变化则需要发送请求
watch(
  () => categoryStore.category3Id,
  category3Id => {
    console.log('attr', category3Id);
    // newValue有值的时候才需要发送请求 没有的时候不需要发送请求
    if (!category3Id) {
      attrList.value = []; // 不要显示的属性列表 数据
      return;
    }
    // 有值才要发送请求 没有值的时候要清空属性列表
    getAttrListData(); // 获取属性列表
  },
  { immediate: true }
);

// 3.实现属性值的添加
const addAttrValue = () => {
  attrInfo.attrValueList.push({
    valueName: '',
    isShowInput: true
  });
  // 上面数据添加后 因为数据是响应式 页面需要实现渲染 而页面数据是渲染异步的
  nextTick(() => {
    inputRef.value?.focus();
  });
};

// 4.如果属性值输入时 要删除当前行 否则要显示span标签
const deleteCurrentRow = (row, index: number) => {
  if (!row.valueName) {
    attrInfo.attrValueList.splice(index, 1);
    return;
  }
  // 如果当前行的输入框中有值 则要显示span标签 隐藏input标签
  row.isShowInput = false;
};

// 5.编辑属性值
const toEditCurrentRow = (row, $index: number) => {
  // 5.1 只需要切换回输入框
  row.isShowInput = true;
  // 并且要让当前行还是有一个获得焦点的效果
  nextTick(() => {
    inputRef.value?.focus();
  });
};

// 6.删除某一个属性值
const deleteAttrValue = (index: number) => {
  attrInfo.attrValueList.splice(index, 1);
};

// 7.添加属性时清空旧值
const toAddAttr = () => {
  isShowAttrList.value = false;
  attrInfo.attrName = '';
  attrInfo.attrValueList = [];

  // 删除更新操作时的id
  delete attrInfo.id;
};

// 8.添加或者更新属性
const toAddOrUpdateAttr = async () => {
  attrInfo.categoryId = categoryStore.category3Id;
  await reqAddOrUpdateAttrInfo(attrInfo);
  // 提示添加成功
  ElMessage.success('添加属性成功');
  // 跳转到属性列表页面
  isShowAttrList.value = true;
  // 重新获取一下数据
  getAttrListData();
};

// 9.删除属性
const deleteAttrInfo = async id => {
  await reqDeleteAttrInfo(id);
  // 提示删除成功
  ElMessage.success('删除属性成功');
  // 重新发送请求 渲染剩下的数据
  // 也可以不发送 只将被删除的数据从当前对象中锅炉
  attrList.value = attrList.value.filter(item => {
    return item.id != id;
  });
};

// 10.更新属性数据回显
const toEditAttrInfo = (row: attrInfoModel) => {
  // 10.1实现界面切换
  isShowAttrList.value = false;
  // 10.2实现数据回显
  Object.assign(attrInfo, row);
};
</script>


<style>
</style>